<template>
  <div class="monitor-content">
    <div class="menu">
      <div>
        <span>单聊</span>
        <strong>{{ userNum }}</strong>
        <span>群聊</span>
        <strong>{{ groupNum }}</strong>
      </div>
      <div>
        消息监控
      </div>
      <div>
        <div>
          <span style="color: #eeeeee;font-size: 13px;margin-right: 5px;">滚动</span>
          <el-switch
              v-model="scroll"
              active-color="#13ce66"
              inactive-color="#333333">
          </el-switch>
        </div>
        <el-button @click="clear">清屏</el-button>
      </div>
    </div>
    <div class="chatroom">
      <chatroom ref="chatRoom"></chatroom>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ElMessage} from "element-plus";
import chatroom from './chatroom.vue'
import {ref, provide} from "vue";

const scroll = ref(true)
const userNum = ref(0)
const groupNum = ref(0)
// 注入
provide('scrollFlag', scroll)


const url = import.meta.env.VITE_API_BASEURL
const se = new EventSource(`${url}/chatRoomMsg`)
se.onerror = (e) => {
  ElMessage.error('网络错误！')
}

const chatRoom = ref<any>(null)
se.onmessage = async (e) => {
  try {
    const data = JSON.parse(e.data)
    chatRoom.value.addMsg(data)
    if (data.code === 6) {
      groupNum.value++
    } else {
      userNum.value++
    }
  } catch (err) {
    console.log('网络错误！', err)
  }
}
// 清屏
const clear = () => {
  chatRoom.value.clear()
  groupNum.value=0
  userNum.value=0
}
</script>

<style lang="scss" scoped>
div.monitor-content {
  max-width: 100%;
  height: 100%;
  background: #edf1f3;
  min-width: 500px;
  position: relative;

  & > div.menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    background: #5b6b7c;

    & > div:nth-child(1) {
      width: 220px;
      display: flex;
      justify-content: flex-start;
      padding-left: 10px;
      align-items: center;
      color: #ffffff;

      & > span {
        margin-left: 5px;

        &:after {
          content: '：';
        }
      }

      strong {
        color: #0fd7a7;
        margin-right: 20px;
      }
    }

    & > div:nth-child(2) {
      flex: 1;
      color: #f6f1f1;
      font-size: 22px;
      //text-indent: 200px;
      text-align: center;
    }

    & > div:nth-child(3) {
      width: 170px;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
  }

  div.chatroom {
    position: relative;
    height: calc(100% - 50px);

  }
}
</style>
